<template>
  <!-- 主页的布局 -->
  <el-container class="main">
    <el-header height="100px">
      <!-- 左边的logo -->
      <div>
        <span class="logo_span">E元微购 - 后台管理系统</span>
      </div>

      <div class="right_div">
        <!-- 头像 -->
        <img class="emp_head" src="../assets/header.jpeg" />
        <div>
          <span class="emp_name">{{emp.name}}</span>
          <el-button type="warning" @click="logout()">退出登录</el-button>
        </div>
      </div>
    </el-header>
    <el-container class="slave">
      <!-- 左边的菜单 -->
      <!-- <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo"
          background-color="#D3DCE6" text-color="#000" active-text-color="#42B983">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>部门管理</span>
            </template>
            <el-menu-item index="1-1" @click="gopage('/DepManager')">部门管理</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>职工管理</span>
            </template>
            <el-menu-item index="2-1" @click="gopage('/EmpManager')">员工管理</el-menu-item>
            <el-menu-item index="2-2" @click="gopage('/RoleManager')">角色管理</el-menu-item>
            <el-menu-item index="2-3" @click="gopage('/PowerManager')">权限管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside> -->

      <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo"
          background-color="#D3DCE6" text-color="#000" active-text-color="#42B983">

          <!-- 基于权限列表 循环生成菜单 -->
          <el-submenu v-for="power,i in powers" v-if="power.type == 1" :index="i+1">
            <template slot="title">
              <i :class="power.powerTag"></i>
              <span>{{power.powerName}}</span>
            </template>
            <!-- 循环二级菜单 -->
            <el-menu-item v-for="power2,j in powers"
              v-if="power2.type == 2 && power2.pid == power.id"
              :index="(i+1)+'-'+(j+1)" @click="gopage(power2.powerTag)">{{power2.powerName}}</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <!-- 右边的工作区 -->
      <el-main>
        <!-- 子路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default{
    data(){
      return {
        emp: {
          name: "姓名"
        },
        //权限列表
        powers: []
      }
    },
    methods: {
      //加载工作区域的组件
      gopage(component){
        //路由的跳转
        this.$router.push(component);
      },
      //退出登录
      logout(){
        //1、ajax -> 后端清空session
        this.$.ajax({
          type: "POST",
          url: this.$.url.logout,
          success: (data) => {
            //2、清空本地localStorage
            localStorage.removeItem("login_emp");
            //3、跳转到登录页面
            this.$router.push("/");
          }
        });

      }
    },
    //页面加载后触发
    mounted(){
      //获取当前登录的用户信息
      var empObj = this.$.get("login_emp");
      if(empObj != null){
        //获取当前登录员工的信息
        this.emp.name = empObj.name;
        //判断当前员工的状态
        var status = empObj.status;
        if(status == 0){
          //沿用默认密码登录 - 通知
          this.$notify({
            title: '警告',
            message: '默认密码不安全，请去修改密码！',
            type: 'warning'
          });
        }

        //获取用户的权限信息
        this.powers = empObj.powers;

      } else {
        //强制跳转到登录页面
        this.$router.push("/");
      }
    }
  }
</script>

<style>

  .el-menu-vertical-demo {
    text-align: left;
  }

  .main {
    height: 100%;
  }

  .el-header {
    background-color: #2C3E50;
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding: 0px;
  }

  .logo_span {
    font-size: 30px;
    color: white;
    font-weight: 900;
    font-family: "楷体";
  }

  .emp_head {
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
  }

  .right_div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
  }

  .right_div div {
    color: white;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .emp_name {
    font-size: 20px;
    font-weight: 900;
    font-family: "楷体";
    margin-bottom: 10px;
  }
</style>
